<template>
  <div class="box">
    <p>入金记录</p>
    <hr />
    <!-- 搜索 -->
    <div class="serch-box">
      <el-input
        placeholder="流水号"
        v-model="searchbox.input"
        @change="search"
        clearable
      >
      </el-input>
      <!-- 商户 -->
      <DropDownOptions
        :options="selectdownAccountList"
        :placeholder="selectdownAccount"
        @blur="selectdownAccountFuc"
      />
      <!-- 卡商 -->
      <!-- <DropDownOptions
        :options="selectdownCardDealerList"
        :placeholder="selectdownCardDealer"
        @blur="selectdownCardDealerFuc"
      /> -->
      <!-- 支付类型 -->
      <DropDownOptionsState
        :options="selectdownStateList"
        :placeholder="selectdownState"
        @blur="selectdownStateFuc"
      />
      <SelectTime @blur="serchTime" />
      <el-button type="primary" icon="el-icon-search" @click="search"
        >搜索</el-button>
    </div>
    <!-- 表格 -->
    <div class="table">
      <TableHeader :headerData="headerData" />
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        highlight-current-row
        border
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <el-table-column
          show-overflow-tooltip
          v-for="item in tableLabel"
          align="center"
          :key="item.prop"
          :label="item.label"
          :sortable="item.prop == 'status_id' ? true : false"
        >
          <template slot-scope="scope">
            <div v-if="item.prop == 'status_id'">
              <span v-if="scope.row[item.prop] == '1'" style="color: orange"
                >未审核</span
              >
              <span
                v-else-if="scope.row[item.prop] == '2'" style="color: yellow"
                >冲正</span
              >
              <span v-else-if="scope.row[item.prop] == '3'" style="color: blue"
                >代付</span
              >
              <span v-else-if="scope.row[item.prop] == '4'" style="color: red"
                >扣款</span
              >
              <span
                v-else-if="scope.row[item.prop] == '5'"
                style="color: #9d2932"
                >退款</span
              >
              <span v-else-if="scope.row[item.prop] == '6'" style="color: green"
                >提现成功</span
              >
              <span
                v-else-if="scope.row[item.prop] == '7'"
                style="color: #789262" >充值成功</span
              >
              <span
                v-else-if="scope.row[item.prop] == '8'"
                style="color: #789262" >充值失败</span
              >
              <span
                v-else-if="scope.row[item.prop] == '9'"
                style="color: #789262" >未处理</span
              >
              <span
                v-else-if="scope.row[item.prop] == '10'"
                style="color: #789262" >已受理</span
              >
              <span
                v-else-if="scope.row[item.prop] == '11'"
                style="color: #789262" >提现失败</span
              >
              <span
                v-else-if="scope.row[item.prop] == '12'"
                style="color: #789262" >待卡商处理</span
              >
            </div>
            <span v-else style="margin-left: 10px">{{
              scope.row[item.prop]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status_id == '7'"
              size="mini"
              type="danger"
              @click="Righting(scope.row, $event)"
              >冲正</el-button
            >
            <el-button
              v-else
              size="mini"
              type="info"
              disabled
              >冲正</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页码 -->
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :total="config.total"
      :current-page.sync="config.page"
      @size-change="handleSizeChange"
      @current-change="changePage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="config.limit"
    >
    </el-pagination>
  </div>
</template>

<script>
import TableHeader from "../../components/MerchantManagement/BusinessListings/TableHeader.vue";
import DropDownOptions from "../../components/MerchantManagement/BusinessListings/DropDownOptions.vue";
import SelectTime from "../../components/MerchantManagement/BusinessListings/SelectTime.vue";
import DropDownOptionsState from"../../components/MerchantManagement/BusinessListings/DropDownOptionsState.vue"
export default {
  data() {
    return {
      //下拉搜索框提示信息
      selectdownAccount: "商户",
      selectdownState: "支付类型",
      selectdownCardDealer: "卡商",
      //搜索框里的内容
      selectdownAccountList: [
        //商户
        {
          value: "选项1",
          label: "黄金糕111",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      selectdownStateList: [
        //状态
        {
          value: "1",
          label: "未审核",
        },
        {
          value: "2",
          label: "冲正",
        },
        {
          value: "3",
          label: "代付",
        },
        {
          value: "4",
          label: "扣款",
        },
        {
          value: "5",
          label: "退款",
        },
        {
          value: "6",
          label: "提现成功",
        },
        {
          value: "7",
          label: "充值成功",
        },
        {
          value: "8",
          label: "充值失败",
        },
        {
          value: "9",
          label: "未处理",
        },
        {
          value: "10",
          label: "已受理",
        },
        {
          value: "11",
          label: "提现失败",
        },
        {
          value: "12",
          label: "待卡商处理",
        },
      ],
      selectdownCardDealerList: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      //搜索框的状态
      searchbox: {
        input: "",
        Account: "",
        State: "",
        serchTime: "",
      },

      headerData: [
        {
          name: "充值总金额",
          MerchantAmount: "2000000",
        },
        {
          name: "充值总手续费",
          MerchantAmount: "2000000",
        },
      ],

      tableLabel: [
        {
          prop: "op_id",
          label: "流水号",
        },
        {
          prop: "status_id",
          label: "支付类型",
        },
        {
          prop: "order_number",
          label: "订单号",
        },
        {
          prop: "merchant_name",
          label: "商户名称",
        },
        {
          prop: "ua_id",
          label: "商户号",
        },
        {
          prop: "card_id",
          label: "卡商id",
        },
        {
          prop: "ap_amount",
          label: "变动金额",
        },
        {
          prop: "operation_man",
          label: "操作人",
        },
        {
          prop: "operation_time",
          label: "操作时间",
        },
      ],
      tableData: [
      ],
      config: {
        page: 1,
        limit: 10,
        total: 10,
      },
    };
  },
  mounted() {
    this.gitTable();
    this.selectrjjlSh(); //商户下拉
    //this.selectrjjlType(); //支付类型
  },
  methods: {
    //请求数据
    gitTable() {
      this.$axios({
        url: "/system/admin/mm/depositrecord/findrjjlAll",
        method: "GET",
        params: this.config,
      })
        .then((res) => {
          this.config.total = res.data.count
          this.tableData = [...res.data.data];
          console.log("列表获取到的数据", res);
        })
        .catch((err) => {
          console.log(err);
        });
      //充值总金额
      this.$axios({
        url: "/system/user/mm/rechargerecord/selectCzjlAllMoney",
        method: "GET",
        params: "",
      })
        .then((res) => {
          this.headerData[0].MerchantAmount = [res.data.data];
        })
        .catch((err) => {
          console.log(err);
        });
      //充值总手续费
      this.$axios({
        url: "/system/user/mm/rechargerecord/selectCzjlAllPayment",
        method: "GET",
        params: "",
      })
        .then((res) => {
          this.headerData[1].MerchantAmount = [res.data.data];
        })
        .catch((err) => {
          console.log(err);
        });
    },
    selectrjjlSh() {
      //商户下拉
      this.$axios({
        url: "/system/admin/mm/depositrecord/selectrjjlSh",
        method: "GET",
        params: {},
      })
        .then((res) => {
          let Data = [...res.data.data];
          this.selectdownAccountList = this.drownList(Data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // selectrjjlType() {
    //   //支付类型下拉
    //   this.$axios({
    //     url: "/system/admin/mm/merchantaccountchange/selectshzbType",//用的商户账变的
    //     method: "GET",
    //     params: {},
    //   })
    //     .then((res) => {
    //       let Data = [...res.data.data];
    //       let typeData = this.drownList(Data);
    //       this.selectdownStateList = this.typeData(typeData);
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    //请求数据
    
    search() {
      //console.log(this.searchbox);
      if (this.searchbox === "") {
        // return this.gitTable();
      } else {
        this.$axios({
          url: "/system/admin/mm/depositrecord/findrjjlAll",
          method: "GET",
          params: {
            id: this.searchbox.input,
            merchant_name: this.searchbox.Account,
            type: this.searchbox.State,
            first_time: this.searchbox.serchTime[0],
            last_time: this.searchbox.serchTime[1],
            page: this.config.page,
            limit: this.config.limit,
          },
        })
          .then((res) => {
            this.tableData = [...res.data.data];
            console.log("搜索用户名:", res);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    serchTime(v) {
      //时间
      this.searchbox.serchTime = v;
      console.log(this.searchbox);
    },
    // selectdownCardDealerFuc(v) {
    //   //卡商
    //   this.searchbox.CardDealer = v;
    //   console.log(this.searchbox);
    // },
    selectdownAccountFuc(v) {
      //商户
      this.searchbox.Account = v;
      console.log(this.searchbox);
    },
    selectdownStateFuc(v) {
      //支付类型
      this.searchbox.State = v;
      console.log(this.searchbox);
    },
    Righting(row, e) {
      //冲正
      console.log(row.id,row.ap_amount,row.merchant_name,row.order_number)
      console.log(e);
      this.$confirm("是否冲正?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            url: "/system/admin/mm/depositrecord/updaterjjlType",
            method: "POST",
            data: {
              order_number: row.order_number,
              merchant_name: row.merchant_name,
              top_up_amount: row.ap_amount,
              id:row.op_id
            },
            
          })
            .then((res) => {
              console.log(res)
              if (res.data.code === 200) {
                this.$message({
                  type: "success",
                  message: "冲正成功!",
                });
                this.gitTable();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消冲正",
          });
        });
    },
    //下拉列表遍历
    drownList(demo) {
      let drownList = [];
      for (let i = 0; i < demo.length; i++) {
        if (demo[i] !== "null") {
          drownList.push({
            label: "",
            value: "",
          });
          drownList[i].label = demo[i];
          drownList[i].value = i+1;
        }
      }
      console.log('下拉遍历',drownList);
      return drownList;
    },
    typeData(type) {
      //状态遍历
      type.forEach(function (item) {
        //遍历数组类型规则
        console.log(item.value)
        if (item.value === 1) {
          item.label = "未审核";
        } 
        else if (item.label == 2) {
          item.label = "冲正";
        }
        else if (item.label == 3) {
          item.label = "代付";
        }
        else if (item.label == 4) {
          item.label = "扣款";
        }
        else if (item.label == 5) {
          item.label = "退款";
        }
        else if (item.label == 6) {
          item.label = "提现成功";
        }
        else if (item.label == 7) {
          item.label = "充值成功";
        }
      });
      return type;
    },
    changePage(page) {
      //点击页码
      this.config.page = page;
      console.log(page);
      this.gitTable();
    },
    handleSizeChange(val) {
      //点击每页展示
      console.log(val);
    },
  },
  components: {
    TableHeader,
    DropDownOptions,
    DropDownOptionsState,
    SelectTime,
  },
};
</script>

<style lang="scss" scoped>
.table {
  margin-top: 20px;
}
.box {
  background-color: rgb(255, 255, 255);
  padding: 15px;
}
.serch-box {
  width: 100%;
  height: 100%;
  display: flex;
}
.el-input {
  width: 200px;
  margin-right: 10px;
}
.block,
.el-select {
  padding-right: 10px;
}
.DropDownOptions {
  padding: 0;
}
.el-message-box__message p {
  font-size: 25px;
}
</style>